<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">

			<!-- <re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.id' prop='id'>
					<el-input v-model='formInline.id' clearable :placeholder='prompt?.id' />
				</el-form-item>
			</re-col> -->
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.projectName' prop='projectName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.projectName' clearable :placeholder='prompt?.projectName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<!-- <el-input v-model='formInline.unityId' clearable :placeholder='prompt?.unityId' /> -->
					<unitParentSelect v-model='formInline.unityId' clearable :placeholder='prompt?.unityId'
						:style="{ width: '100%' }"  @blur="formValidateField(ruleFormRef, 'unityId')"/>
						
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.contactName' prop='contactName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.contactName' clearable :placeholder='prompt?.contactName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.contactPhone' prop='contactPhone'>
					<el-input v-model='formInline.contactPhone' clearable :placeholder='prompt?.contactPhone' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.city' prop='city'>
					<el-cascader style="width: 100%;" :options="CityDatas.options" v-model="formInline.city"
						:show-all-levels="true"
						:props="{ multiple: false, checkStrictly: false, emitPath: true, value: 'label', label: 'label' }"
						@change="cityChange($event)" placeholder="请输入项目所在城市">
					</el-cascader>
					<!-- <el-input v-model='formInline.city' clearable :placeholder='prompt?.city' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.expireDate' prop='expireDate'>
					<el-date-picker style="width: 100%;" class="pickerW" value-format="YYYY-MM-DD" v-model='formInline.expireDate'
						type="date" :placeholder='prompt?.expireDate' />
					<!-- <el-input v-model='formInline.expireDate' clearable :placeholder='prompt?.expireDate' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.address' prop='address'>
					<el-input :maxlength="30" :show-word-limit="true"  v-model='formInline.address' clearable :placeholder='prompt?.address' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input :maxlength="100" :show-word-limit="true" type="textarea" autosize v-model='formInline.remark' clearable
						:placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.openFunc' prop='openFunc'>
					<!-- <el-input v-model='formInline.openFunc' clearable :placeholder='prompt?.openFunc' /> -->
					<el-checkbox-group v-model="formInline.openFunc" @change="changeopenFunc">
						<el-checkbox :value="1" label="巡检">

						</el-checkbox>
						<el-checkbox :value="2" label="工单">

						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</re-col> </el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/projectManagementes/projectManagementes/index';
import { regionData } from "element-china-area-data";
import unitParentSelect from '@/components/select/unitParentSelect/unitParentSelectTree.vue'
import { formValidateField } from '@/utils/functions'
const CityDatas = reactive({  //城市数据
	options: regionData,
})
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{  //表单校验规则
	projectName: [{ required: true, message: prompt?.projectName, trigger: 'blur' },],
	unityId: [{ required: true, message: prompt?.unityId, trigger: 'change' },],
	city: [{ required: true, message: prompt?.city, trigger: 'change' },],
	address: [{ required: true, message: prompt?.address, trigger: 'blur' },],
	expireDate: [{ required: true, message: prompt?.expireDate, trigger: 'change' },],
});
const ruleFormRef = ref();

const changeopenFunc = (e) => {  //功能开通多选
	console.log('eeee',e);
	
	props.formInline.openFunc = e

}
const cityChange = (e) => { //城市选择
	props.formInline.city = e
}
function getRef() {
	return ruleFormRef.value;
}
defineExpose({ getRef });
</script>
<style lang="scss" scoped>
.pickerW {
	width: 100% !important;
}
</style>
